<template>
  <view class="uni-container">
    <!--标签区-->
    <view class="uni-padding-wrap uni-common-mt">
      <my-segmented-control code="2" v-model="classifyName" @clickItem="clickSegmented"></my-segmented-control>
    </view>
    <view class="list-container">
      <a-j-list :api-url="this.url.list" ref="listRef" order="asc" column="quantity" :is-load-data="false"
                :is-expanded="true"
                :height="100" :is-total-row="true" :columns="columns">
        <template #item="{item}">
          <detail-list-view :item="item"></detail-list-view>
        </template>
      </a-j-list>
    </view>
  </view>
</template>

<script>
import UniSegmentedControl
  from "../uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue";
import {JeecgListMixin} from "../utils/JeecgListMixin";
import AJList from "../components/list/aList.vue";
import DetailListView from "../components/list/view/detailListView.vue";
import MySegmentedControl from "../components/functional/control/mySegmentedControl.vue";

export default {
  mixins: [JeecgListMixin],
  components: {
    MySegmentedControl,
    DetailListView,
    AJList,
    UniSegmentedControl,
  },
  data() {
    return {
      classifyName: "",
      model: {},
      popupTitle: "",
      // 通过计算得到可用高度
      role: this.$store.state.user.roles,
      url: {
        list: "api/boss/shopInventoryPageList",
      },
      shopList: [],
      columns: [
        {
          title: '名称',
          align: 'center',
        },
        {
          title: '库存',
          align: 'center',
          text: "quantity",
          iconU: ['../static/s.png', '../static/colors.png'],
          iconD: ['../static/x.png', '../static/colorc.png'],
        },
        {
          title: '销量',
          align: 'center',
          text: "",
          iconU: ['../static/s.png', '../static/colors.png'],
          iconD: ['../static/x.png', '../static/colorc.png'],
        },
        {
          title: '周转',
          align: 'center',
          text: "",
          iconU: ['../static/s.png', '../static/colors.png'],
          iconD: ['../static/x.png', '../static/colorc.png'],
        },
      ]
    }
  },
  watch: {
    classifyName: {
      handler(newVal) {
        if (this.$refs.listRef && newVal) {
          this.$refs.listRef.queryParam.classifyName = this.classifyName
          this.$refs.listRef.loadData(1)
        }
      },
      immediate: true // 确保初始化同步
    },
  },
  methods: {
    /**
     * 查询
     * @param e
     */
    clickSegmented(e) {
      this.current = e.currentIndex
      this.$refs.listRef.queryParam.classifyName = e.name
      this.$refs.listRef.searchQuery()
    },
  },
  onReady() {
    /* 排序参数 */
  },
  async onLoad(option) {
    if (option.goodsId) {
      this.goodsId = option.goodsId
    }
    if (option.specsId) {
      this.specsId = option.specsId
    }
  },
}
</script>
<style>
.uni-container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  flex: 1;
  background-color: #fff;
}

view {
  background-color: white;
}

.list-container {
  /* 关键修改：让列表容器占据剩余空间 */
  flex: 1;
  min-height: 0; /* 防止内容溢出 */
  overflow: hidden;
}
</style>
